<template>
  <div :class="rwClassName" :style="rwStyle">
    <CanvasRuler
      :vertical="vertical" :scale="scale" :width="width" :height="height" :start="start"
      :select-start="selectStart" :select-length="selectLength" :canvas-configs="canvasConfigs"
      @onIndicatorShow="handleIndicatorShow" @onIndicatorMove="handleIndicatorMove"
      @onIndicatorHide="handleIndicatorHide"
    >
    </CanvasRuler>
    <div v-show="showIndicator" class="indicator" :style="indicatorStyle">
      <div class="value">
        {{ value }}
      </div>
    </div>
  </div>
</template>

<script>
import CanvasRuler from './canvasRuler/canvasRuler.vue';
export default {
  name: 'RulerWrapper',
  components: {
    CanvasRuler,
  },
  props: {
    vertical: Boolean,
    scale: Number,
    width: Number,
    thick: Number,
    height: Number,
    start: Number,
    selectStart: Number,
    selectLength: Number,
    canvasConfigs: Object,
    palette: Object,
  },
  data() {
    return {
      showIndicator: false,
      value: 0,
    };
  },
  computed: {
    rwClassName() {
      const className = this.vertical ? 'v-container' : 'h-container';
      return className;
    },
    rwStyle() {
      const hContainer = {
        width: `calc(100% - ${this.thick}px)`,
        height: `${this.thick + 1}px`,
        left: `${this.thick}` + 'px',
      };
      const vContainer = {
        width: `${this.thick + 1}px`,
        height: `calc(100% - ${this.thick}px)`,
        top: `${this.thick}` + 'px',
      };
      return this.vertical ? vContainer : hContainer;
    },
    indicatorStyle() {
      const indicatorOffset = (this.value - this.start) * this.scale;
      let positionKey = 'top';
      let boderKey = 'borderLeft';
      positionKey = this.vertical ? 'top' : 'left';
      boderKey = this.vertical ? 'borderBottom' : 'borderLeft';
      return {
        [positionKey]: indicatorOffset + 'px',
        [boderKey]: `1px solid ${this.palette.lineColor}`,
      };
    },
  },
  methods: {
    handleIndicatorShow(value) {
      this.showIndicator = true;
      this.value = value;
    },
    handleIndicatorMove(value) {
      if (this.showIndicator) {
        this.value = value;
      }
    },
    handleIndicatorHide() {
      this.showIndicator = false;
    },
  },
};
</script>

<style lang="scss" scoped>

.h-container,
.v-container {
  position: absolute;

  .lines {
    pointer-events: none;
  }

  &:hover .lines {
    pointer-events: auto;
  }
}

.h-container {
  top: 0;

  .indicator {
    top: 0;
    height: 100vw;

    .value {
      padding: 0 2px;
      width: auto;
      margin-left: 4px;
      margin-top: 4px;
    }
  }
}

.v-container {
  left: 0;

  .indicator {
    width: 100vw;

    .value {
      padding: 0 2px;
      width: auto;
      left: 0px;
      margin-left: 2px;
      margin-top: -5px;
      transform-origin: 0 0;
      transform: rotate(-90deg);
    }
  }
}
</style>
